<extend name="Base/common"/>
<block name="body">
    <style>
        .header select{border: 0;}
        #chose,li input{display: none;}
        #index .header input#search{margin-left: 50px;}
        #index .header div img{margin-left: 70px;}
    </style>

    <!-- <select name="pid" style="width: 95px;">
        <option value="">全部省市</option>
        <volist name="areas" id="v">
        <option value="{$v.id}" <eq name="Think.get.area_pid" value="$v.id"> selected="selected" </eq> >{$v.title}</option>
        </volist>
    </select>
    <select name="area_id" style="width: 95px;">
        <option value="">全部地区</option>
    </select> -->
    <!-- 地区 -->
    <div id="diqu" style="display: none">
        <header><a href="javascript:;" class="back"><img src="__IMG__/images/back_03.png"/></a>地区选择 <a href="javascript:;" class="sure">确认</a></header>
        <div id="area">
            <div class="chose list1" style="display: none">
                <p><strong class="f-fl dangqian"></strong></p>
                <ul id="area_list">

                </ul>
            </div>
            <div class="AToZ">
                <ul>
                    <li class="jia">全部</li>
                    <volist name="areas" id="v">
                        <li name="pid" area_pid="{$v.id}" data-title="{$v.title}">{$v.title}</li>
                    </volist>
                </ul>

            </div>

        </div>
    </div>
    <script type="text/javascript">
        $(function () {


            //聚焦导航搜索 最底部消失
            $('#search').focus(function () {
                $('.LinkB').hide();
                $('.Fix').hide();
            });
            $('#search').blur(function () {
                $('.LinkB').show();
                $('.Fix').show();
            });
        })
        $('.jia').click(function () {
            $('.list1').hide();
            $('.jia').css('background', '#f6ce78');
            $('li[name=pid]').css('background', '#FFF');
            $('.sure').click(function () {
                users('0', '0', '0', '0', '0', '', '', '', '', '', '-1');
            });
        });
        $('li[name=pid]').click(function () {
            var v = $(this).attr('area_pid');
            var a = $(this).attr('data-title');
            $('.list1').show();
            $('.dangqian').html("当前:" + a);
            $('li[name=pid]').css('background', '#FFF');
            $(this).css('background', '#f6ce78');
            $('.jia').css('background', '#FFF');
            $.ajax({
                url: '{:U('area / areaList')}',
                type: 'POST',
                dataType: 'json',
                data: {id: v},
                success: function (data) {
                    var content = "<li class='' area_id=''>全城</li>";
                    $.each(data, function (name, value) {
                        content += "<li area_id='" + value.id + "'>" + value.title + "</li>"
                    });
                    content += "<div class='clear'></div>";
                    $('#area_list').html("");
                    $('#area_list').append(content);
                }
            })
        });

        $('li[name=pid]').click(function () {
            $(document).scrollTop(0);
            var va = $(this).attr('area_pid');
            $('#area_list').on('click', 'li', function () {
                var vs = $(this).attr('area_id');
                $('#area_list').find('li').removeClass('moren');
                $(this).addClass('moren');
                $('.sure').click(function () {
                    users('0', '0', '0', '0', '0', va, vs, '', '', '', '-1');
                });
            });
            $('.sure').click(function () {
                users('0', '0', '0', '0', '0', va, '', '', '', '', '-1');
            });
        });
    </script>
    <!-- 地区 -->
    <!-- 筛选 -->
    <div id="chose">
        <header><a href="javascript:;" class="back"><img src="__IMG__/images/back_03.png"/></a>筛选 <a href="javascript:;" class="sure">确认</a></header>
        <div class="chose">
            <p>性别</p>
            <ul>
                <li>不限<input type="radio" name="sex" value="" <eq name="Think.get.sex" value=""> checked="checked" </eq> /></li>
                <li>男<input type="radio" name="sex" value="1" <eq name="Think.get.sex" value="1"> checked="checked" </eq> /></li>
                <li>女<input type="radio" name="sex" value="2" <eq name="Think.get.sex" value="2"> checked="checked" </eq> /></li>
            </ul>
            <p>年龄</p>
            <ul>
                <li>不限<input type="radio" name="age" value="" <eq name="Think.get.age" value=""> checked="checked" </eq> /></li>
                <li>18~22<input type="radio" name="age" value="18,22" <eq name="Think.get.age" value="18,22"> checked="checked" </eq> /></li>
                <li>23~26<input type="radio" name="age" value="23,26" <eq name="Think.get.age" value="23,26"> checked="checked" </eq> /></li>
                <li>27~30<input type="radio" name="age" value="27,30" <eq name="Think.get.age" value="27,30"> checked="checked" </eq> /></li>
                <li>31~35<input type="radio" name="age" value="31,35" <eq name="Think.get.age" value="31,35"> checked="checked" </eq> /></li>
                <li>36~40<input type="radio" name="age" value="36,40" <eq name="Think.get.age" value="36,40"> checked="checked" </eq> /></li>
                <li>40以上<input type="radio" name="age" value="40" <eq name="Think.get.age" value="40"> checked="checked" </eq> /></li>
            </ul>
            <p>身份</p>
            <ul>
                <li class="">
                    全部
                    <input type="radio" name="identity" value="" <eq name="Think.get.identity" value=""> checked="checked" </eq> />
                </li>
                <volist name="identity" id="v">
                    <li class="">
                        {$v.title}
                        <input type="radio" name="identity" value="{$v.value}" <eq name="Think.get.identity" value="$v.value"> checked="checked" </eq> />
                    </li>
                </volist>
            </ul>
        </div>
    </div>
    <!-- 筛选 -->


    <!--首页-->
    <div id="index">
        <div class="header">
            <a href="javascript:;" class="where"><img src="__IMG__/images/IDX_03.png"/><if condition="$_GET['area_pid']">{$_GET['area_pid']|getArea=###}<else/>全部</if></a>
            <div class="search">
                <!-- <select name="choose" style="width:68px;-webkit-appearance:none;margin-left:25px;">
                        <option value="c" selected="selected" style="font-size: 20px">课程</option>
                        <option value="n"style="font-size: 20px" >昵称</option>
                </select> -->
                <!-- <input type="text" id="search" value="" /> -->
                <input type="text" id="search" name="search" value="<neq name="Think.get.keywords" value="">{$Think.get.keywords|mb_substr=###,0,-1,'UTF8'}</neq>" flag="c" placeholder="搜索"/>
                <img src="__IMG__/images/areaSearch_06.png"/>
            </div>
            <a href="javascript:;" class="more"><img src="__IMG__/images/IDX_05.png"/></a>
        </div>
        <div class="indexList">
            <ul class="chosebox">
                <volist name="labels" id="v">
                    <li class="">
                        {$v.title}
                        <input type="radio" name="lab" value="{$v.value}" style="" <eq name="Think.get.label" value="$v.value"> checked="checked" </eq> />
                    </li>
                </volist>
                <li class="BO_UL">排序 <img src="__IMG__/images/indexjt_10.jpg"/>
                    <ul id="rule">
                        <li <eq name="$_GET" value="null">style="background:#f6ce78"</eq>><a href="{:U('UserMember/userlist')}">查看所有</a></li>
                        <li <eq name="Think.get.star" value="1">style="background:#f6ce78"</eq>><a name="eva">评价从高到低</a></li>
                        <li <eq name="Think.get.addtime" value="1">style="background:#f6ce78"</eq>><a name="addtime">最新发布时间</a></li>
                        <li <eq name="Think.get.salary" value="1">style="background:#f6ce78"</eq>><a name="salary">价格从低到高</a></li>
                    </ul>
                </li>
            </ul>
            <style>
                /*.IndexList li{height:800px;}*/
            </style>
            <div class="IndexList">
                <ul class="like block">
                    <volist name="users" id="v">
                        <li class="class-date">
                            <div class="per">
                                <a href="__CONTROLLER__/userDetail/uid/{$v.id}/teaching/{$Think.get.teaching}"  class="f-fl">
                                    <img src="__ROOT__{$v.logo|getimg=###}"/>
                                </a>
                                <div class="f-fl div-class">
                                    <h1>{$v.nickname}<img src="__IMG__/images/<switch name='v.sex'><case value='1'>nan_03</case><case value='2'>girl_03</case></switch>.png"/>
                                        <span>{$v.minsalary}元/小时</span>
                                        <gt name="v.vip_endtime" value="$datetime"><img src="__IMG__/images/perV_06.png"/></gt>
                                    </h1>
                                    <p class="moren">
                                        <img src="__IMG__/images/idxe_18.jpg"/>
                                        <switch name="Think.get.teaching">
                                    <case value="1">想学</case>
                                    <case value="2">技能</case> 
                                    </switch>:
                                    <volist name="v.courses" id="c">
                                        <span class="class-span">{$c}&emsp;</span>
                                    </volist>
                                    </p>
                                    <eq name="Think.get.teaching" value="2"><p><img src="__IMG__/images/idxe_24.jpg"/> 教过: {$v.id|teached=###}</p></eq>
                                    <p><img src="__IMG__/images/idxe_27.jpg"/>位置:{$v.area_id|getParentArea=###}{$v.area_id|getArea=###}</p>
                                    <eq name="v.passed" value="1"><img src="__IMG__/images/idxe_21.jpg"/ class="posi"></eq>
                                    
                                </div>
                                <div class="clear"></div>
                            </div>
                            <p class="chat">
                                <img class="img-width" src="__IMG__/images/idxe2_18.jpg"/>{$v.inaword}
                                <hr />
                            </p>
                            <div class="clear"></div>
                        </li>
                    </volist>
                </ul>
                <!--<input type="button" class="jzgd" value="加载更多">-->

            </div>
        </div>
        <style>
            .jzgd{display:block;border:none;outline:none;background:#4ea3fd;color:#fff;border-radius:5px;width:98%;font-size:22px;margin:10px 1%;padding:11px 0;letter-spacing:4px;}
        </style>
        <img src="__IMG__/images/personLInk_02.jpg" class="Fix"/>
        <p class="LinkB">
        <if condition="$_GET['teaching'] eq 2">
            <!--老师-->
            <a href="{:U('UserMember/userList',array('teaching' =>2))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:0px;opacity:1;"></a>
            <!--学生-->
            <a href="{:U('UserMember/userList',array('teaching' =>1))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-247px;"></a>
            <elseif condition="$_GET['teaching'] eq 1"/>
            <!--老师-->
            <a href="{:U('UserMember/userList',array('teaching' =>2))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:0px;"></a>
            <!--学生-->
            <a href="{:U('UserMember/userList',array('teaching' =>1))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-247px;opacity:1;"></a>
        </if>
        <!--个人-->

        <a href="{:U('Index/index')}"  style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-493px;"></a>
        <neq name="num" value="0"><span class="perNum" id="perNewOther" style="position: absolute;left: 640px;top: 5px;">{$num}</span></neq>
        <!-- <a href="{:U('UserMember/login')}"  style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-493px;"></a> -->

        </p>
    </div>
    
    <script>
        $(window).scroll(function () {
             var i = $('.class-date').size();
             var num = "{$nums}";
             var totalheight = $(window).height() + $(window).scrollTop();
             var aa = $(document).height();
//             console.log(totalheight);
//             console.log(aa);exit();
            if ($(document).height() - totalheight < 5  &&  num > i) {
                layer.msg('加载中', {
                    icon: 16
                    ,shade: 0.001,
                    time: 150
                  }, function(){   
                var teaching = "{$_GET['teaching']}";
                var label = "{$_GET['label']}";
                var sex = "{$_GET['sex']}";
                var age = "{$_GET['age']}";
                var identity = "{$_GET['identity']}";
                var area_pid = "{$_GET['area_pid']}";
                var area_cid = "{$_GET['area_cid']}";
                var star = "{$_GET['star']}";
                var addtime = "{$_GET['addtime']}";
                var salary = "{$_GET['salary']}";
                var keywords = "{$_GET['keywords']}";
                var limit = i;               
                $.ajax({
                    async: false,
                    url: "{:U('userList')}",
                    type: 'POST',
                    dataType: 'html',
                    data: {teaching: teaching, label: label, sex: sex, age: age, identity: identity, area_pid: area_pid, area_cid: area_cid, star: star, addtime: addtime, salary: salary, keywords: keywords, limit: limit},
                    success: function (data) {
                        data = $.parseJSON(data);

                        $.each(data, function (n, v) {
                            if (v.sex == 1) {
                                var ss = "nan_03";
                            } else {
                                var ss = "girl_03";
                            }
                            if (v.teaching == 1) {
                                var aa = "想学";
                                var aa2 = '';
                            } else {
                                var aa = "技能:";
                                var aa2 = "<p><img src='__IMG__/images/idxe_24.jpg'/>教过:" + v.jiaoguo+"</p>";
                            }
                            if (v.passed == 1) {
                                var passed = "<img src='__IMG__/images/idxe_21.jpg'/ class='posi'>";
                            } else {
                                var passed = '';
                            }
                            if (v.inaword != '') {
                                var mm = v.inaword;
                            } else {
                                var mm = '';
                            }
                            var timestamp = "{$datetime}";
                            if (v.vip_endtime > timestamp) {
                                var endtime = "<img src='__IMG__/images/perV_06.png'/>";
                            } else {
                                var endtime = "";
                            }
                            var str = "<li class='class-date'><div class='per'><a href='__CONTROLLER__/userDetail/uid/" + v.id + "/teaching/" + v.teaching + "' class='f-fl'><img src='__ROOT__" + v.logos + "'/></a><div class='f-fl div-class'><h1>" + v.nickname + "<img src='__IMG__/images/" + ss + ".png'/><span>" + v.minsalary + "元/小时</span>" + endtime + "</h1><p class='moren'><img src='__IMG__/images/idxe_18.jpg'/>" + aa + v.kecheng + "</p>" + aa2 + "<p><img src='__IMG__/images/idxe_27.jpg'/>位置:" + v.sheng + v.shi + "</p>" + passed + "</div><div class='clear'></a></div></div><p class='chat'><img class='img-width' src='__IMG__/images/idxe2_18.jpg'/>" + mm + "</p><div class='clear'></div></li>";
                            $('.block').append(str);
//                            setTimeout(function(){},1000);
                            
                        });
                            layer.close(index);
                    }
                })       
             });
            }
        });
        //默认选中
        if ('{$Think.get.label}' == '') {
            var v = $('input[name=lab]:first').val();
            users('0', v, '0', '0', '0', '0', '0', '', '', '', '-1');
        }
        $(function () {
            var num = "{$nums}";
            var i = $('.class-date').size();
            if (num == i) {
                $('.jzgd').css('display', 'none');
            }
        });
        $('.like').on('click', '.per', function () {
            var i = $('.class-date').size();
            var url = $(this).find('a').attr('href');
            url = url + "/linum/" + i;
            location.href = url;
        })
        /* 结果筛选 */
        $('input[name=lab]').change(function () {
            var v = $(this).val();
            users('0', v, '0', '0', '0', '0', '0', '', '', '', '-1');
        });
        $('a[name=eva]').click(function () {
            var v = 1;
            users('0', '0', '0', '0', '0', '0', '0', v, '', '', '-1');
        });
        $('a[name=addtime]').click(function () {
            var v = 1;
            users('0', '0', '0', '0', '0', '0', '0', '', v, '', '-1');
        });
        $('a[name=salary]').click(function () {
            var v = 1;
            users('0', '0', '0', '0', '0', '0', '0', '', '', v, '-1');
        });
        $('input[name=search]').blur(function () {
            var v = $(this).val() + $(this).attr('flag');
            users('0', '0', '0', '0', '0', '0', '0', '', '', '', v);
        });
        function users(teaching, lab, sex, age, identity, area_pid, area_cid, star, addtime, salary, keywords) {
            if (teaching == '0') {
                teaching = "{$Think.get.teaching}";
            }
            if (lab == '0') {
                lab = "{$Think.get.label}";
            }
            if (sex == '0') {
                sex = "{$Think.get.sex}";
            }
            if (age == '0') {
                age = "{$Think.get.age}";
            }
            if (age == '0') {
                age = "{$Think.get.age}";
            }
            if (identity == '0') {
                identity = "{$Think.get.identity}";
            }
            if (area_pid == '0') {
                area_pid = "{$Think.get.area_pid}";
            }
            if (area_cid == '0') {
                area_cid = "{$Think.get.area_cid}";
            } else if (area_cid == '-1') {
                area_cid = '';
            }
            if (star == '' && addtime == '' && salary == '') {
                star = "{$Think.get.star}";
            }
            if (star == '' && addtime == '' && salary == '') {
                addtime = "{$Think.get.addtime}";
            }
            if (star == '' && addtime == '' && salary == '') {
                salary = "{$Think.get.salary}";
            }
            if (keywords == '-1') {
                keywords = "{$Think.get.keywords}";
            }
            //带参数跳转
            location.href = "__ACTION__" + "/teaching/" + teaching + "/label/" + lab + "/sex/" + sex + "/age/" + age + "/identity/" + identity + "/area_pid/" + area_pid + "/area_cid/" + area_cid + "/star/" + star + "/addtime/" + addtime + "/salary/" + salary + "/keywords/" + keywords;
        }
        /* 结果筛选结束 */

        //地区联动
        var id = '{$Think.get.area_pid}';
        if (id != '') {
            $.post('__MODULE__/Area/areaList', {'id': id}, function (res) {
                $.each(res, function (index, el) {
                    $('select[name=area_id').append('<option value=\'' + el.id + '\'>' + el.title + '</option>');
                });
            });
        }

        //切换搜索方式
        // $('select[name=choose]').change(function(){
        // 	var val = $(this).val();
        // 	def(val);
        // });

        //默认选中搜索方式
        // var k = '{$Think.get.keywords|mb_substr=###,-1,1,'UTF8'}';
        // if (k != '') {
        // 	$('select[name=choose]').val(k);
        // 	def(k);
        // } else {
        // 	def('c');
        // }

        // function def(val){
        // 	var msg = (val == 'c' ? '请输入课程名称' : '请输入用户昵称');
        // 	$('input[name=search]').attr('flag',val).attr('placeholder',msg);
        // }

        //筛选分类标签，设置隐藏的checkbox选中
        $('.chosebox li').click(function () {
            $(this).find('input').attr('checked', true).trigger('change');
        });

        //显示筛选页
        $('.header .more').click(function () {
            $('#chose').show(300);
            $('#index').hide(300);
        });
        $('.chosebox li:last').trigger('click');
        //隐藏筛选页
        $('.back').click(function () {
            $('#chose').hide(300);
            $('#index').show(300);
        });
        //地区显示
        $('.back').click(function () {
            $('#diqu').hide(300);
            $('#index').show(300);
        });
        //地区隐藏
        $('.header .where').click(function () {
            $('#diqu').show(300);
            $('#index').hide(300);
        });
        //筛选页标签变色效果
        $('.chose li').click(function () {
            $(this).siblings('li').removeClass('moren');
            $(this).addClass('moren').find('input').attr('checked', true);
        })

        //选择完成
        $('.sure').click(function () {
            $('#chose').hide(300);
            $('#index').show(300);
            var sex = $('input[name=sex]:checked').val();
            var age = $('input[name=age]:checked').val();
            var identity = $('input[name=identity]:checked').val();
            users('0', '0', sex, age, identity, '0', '0', '', '', '', '-1');
        });
        //选项卡默认样式
        $('input[type=radio]:checked').parent().addClass('moren');

    </script>
</block>